<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background:#ebebeb;
			}
			.mui-media {
				font-size: 14px;
			}
			
			.mui-table-view .mui-media-object {
				max-width: initial;
				width: 90px;
				height: 70px;
			}
			
			.meta-info {
				position: absolute;
				left: 115px;
				right: 15px;
				bottom: 8px;
				color: #8f8f94;
			}
			
			.meta-info .author,
			.meta-info .time {
				display: inline-block;
			}
			
			.meta-info .time {
				float: right;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
			
			.banner {
				height: 180px;
				overflow: hidden;
				position: relative;
				background-position: center;
				background-color: #ccc;
			}
			
			.banner img {
				width: 100%;
				height: auto;
			}
			
			.banner .title {
				position: absolute;
				left: 15px;
				bottom: 15px;
				width: 90%;
				font-size: 16px;
				font-weight: 400;
				line-height: 21px;
				color: white;
				z-index: 11;
			}
			#main .mui-ellipsis-2{
				font-size:16px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="main">
			<!--列表信息流 开始-->
			<div class="mui-scroll">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" v-for="item in items">
						<a href="javascript:;" @tap="open_detail(item)">
							<img class="mui-media-object mui-pull-left" :src="item.pic">
							<div class="mui-media-body">
								<div class="mui-ellipsis-2">{{item.name}}</div>
							</div>
							<div class="meta-info">
								<div class="author">{{item.uname}}</div>
								<div class="time">{{item.catime}}</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<!--列表信息流 结束-->
		</div>
		<script src="../../js/app.js"></script>
		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script type="text/javascript">
			var firstid = ''; //最旧的msg id，用于上拉加载
			var lastid = ''; //最新的msg id，用于下拉刷新
			var self = '';
			state=app.getState();
			memberToken = state.memberToken;
			mui.init({
				pullRefresh: {
					container: '#main',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			mui.plusReady(function() {
				self=plus.webview.currentWebview()
			});
			
			//下拉刷新
			function pulldownRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				var data = {
					type: self.type,
					memberToken: memberToken
				};
				if(lastid) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
					data.lastid = lastid;
				}
				mui.post(Apiurl+'index/ad', data, function(data) {
					mui('#main').pullRefresh().endPulldownToRefresh();
					if(data && data.length > 0) {
						lastid = data[0].id;
						if(!firstid) { //首次拉取列表时保存最后一条消息的id，方便上拉加载时使用
							firstid = data[data.length - 1].id;
						}
						main.items = data.concat(main.items);
					}
				}, 'json');
			}
			//上拉加载
			function pullupRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				var data = {
					type: self.type,
					memberToken:memberToken
				};
				if(firstid) { //说明已有数据，目前处于上拉加载，传递当前Id 返回历史数据
					data.firstid = firstid;
				}
				//请求历史列表信息流
				mui.post(Apiurl+'index/ad', data, function(data) {
					mui('#main').pullRefresh().endPullupToRefresh();
					if(data && data.length > 0) {
						firstid = data[data.length - 1].id; //保存最后一条消息的id，上拉加载时使用
						main.items = main.items.concat(data);
					}
				}, 'json');
			}
			
			var main = new Vue({
				el: '#main',
				data: {
					items: [] //列表信息流数据
				},
				methods: {
					open_detail: function(item) {
						console.log(item.link);
						mui.openWindow({
							url: item.link,
							id: 'ad_detail',
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#25aae3', //导航栏背景色
									titleText: item.name, //导航栏标题
									titleColor: '#F7F7F7', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									splitLine: { //底部分割线
										color: '#cccccc'
									}
								}
							}

						});
					}
				}
			});
			//重写返回
			var old_back = mui.back;
			mui.back = function(event) {
				//console.log(plus.webview.currentWebview().id);   
				var adWebview = plus.webview.getWebviewById('ad_detail');
				if(adWebview) {
					adWebview.close();
				} else {
					old_back();
				}
			};
		</script>
	</body>

</html>